<!--
 * @Author: wangwei wangwei3@mia.com
 * @Date: 2022-10-10 15:32:31
 * @LastEditors: wangwei wangwei3@mia.com
 * @LastEditTime: 2022-10-25 11:12:32
 * @FilePath: /cctvch/src/views/pages/home/components/Banner.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup lang="ts">
import Swiper from '@/components/swiper.vue';
import { onMounted, onUnmounted, reactive, watch, toRefs, ref } from 'vue';
import { useRoute } from "vue-router";
const props = defineProps({
  list: {
    type: Array,
    default: () => []// as Array<Record<string, string>>
  },
})
const { list } = toRefs(props)
const route = useRoute()
const boxDom = ref()
const height = ref(0)
const data = reactive({
  list: [] as any[]
})
onMounted(() => {
  data.list = list.value
  height.value = boxDom.value.offsetWidth * 0.3
  window.onresize = () => {
    if (route.path === '/home') {
      height.value = boxDom.value.offsetWidth * 0.3
    }
  }
})
onUnmounted(() => {
  window.onresize = null
})
watch(
  list,
  (val: any) => {
    data.list = val
  }
)
</script>

<template>
  <div class="banner-wrap" ref="boxDom" >
  <!-- <div class="banner-wrap" ref="boxDom" style="height:580px;width:1920px"> -->
    <div class="banner-text"></div>
    <div class="banner-inner">
      <Swiper :list="data.list">
        <template #[i] v-for="(item,i) in data.list">
          <img class="img" :src="item.display_image" :alt="item.title">
        </template>
      </Swiper>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.banner-wrap {
  overflow: hidden;
  position: relative;
  // max-width: 1920px;
  min-width: 1440px;
  margin: 0 auto;

  .icon {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    cursor: pointer;

    &.left {
      left: 0;
      background-image: url('@/assets/icon/left.png');

      &:hover {
        background-image: url('@/assets/icon/left-h.png');
      }
    }

    &.right {
      right: 0;
      background-image: url('@/assets/icon/right.png');

      &:hover {
        background-image: url('@/assets/icon/right-h.png');
      }
    }
  }
}

@media screen and (max-width: 1440px){
  .banner-wrap{
    height: 432px;
  }
}

@media (min-width: 1441px) and (max-width: 1920px) {
  .banner-wrap {
    height: 540px;
  }
}
@media screen and (min-width: 1920px) {
  .banner-wrap {
    height: 750px;
  }
}
  
.banner-inner {
  position: absolute;
  width: 100%;
  height: 100%;

  .img {
    width: 100%;
  }
}
</style>
